Hosting a GitHub Page - R Cheat Sheet

This exercise will allow you to create a basic web page which will be required for the Investigate Your Community final project option.

For this exercise, you will create a page with your notes on R commands. You will then host it on your GitHub page.

You will write your code in chunks but not execute the data. Use {r eval=FALSE, include=TRUE} in the header so the page will render without running the actual code.

Styled Text

Outside of the codeblocks (the gray sections where we write code), we can style any text using standard markdown styling.

This is a nice guide to styling text with markdown: Markdown guide

We can create headings similar to html’s h1 to h6 with hashtags.

This is an h5

We can create links, like this: google

We can bold or italic text.

We can create bulleted lists.

  • bullet one
  • bullet two
  • bullet three

Code blocks

We can also add special code inside of code blocks – the gray sections where we write code – that control how they render in our html document. These output options let us do things like:

  • Show or hide the code when we render our html document (echo: true or false)
  • Prevent the code from actually running when we render our html document (eval: true or false)
  • Hide warnings from outputing when we render our html document (warning: true or false)

The code below, for example, will output the text inside the print statement when rendered to html, but the actual code – the print() function – will be hidden.

Create your website

In place of these instructions, you will copy over your notes from this semester about key R commands and processes that will leave you with a usable cheat sheet. So make a copy of this now and follow the steps.

First, create H1 headers for common tasks such as Data Viz, Building Tables, Cleaning Data, Joins

For example:

Data Viz

Notes on building a dual axis graphic with Parker:

Scale Dollars and Percentages

Dual Axis Format

income_vacancy %>% 
  ggplot(aes(x = community)) +
  geom_point(aes(y=income_2020), color = "#64D197", stroke=5) +
  geom_point(aes(y=vacant_2020*1000), stroke=5, color = "#FB8AE3") +
  scale_y_continuous(
    name = "2020 Income (Green)", limits=c(0, 62000), labels=scales::dollar_format(),
    sec.axis = sec_axis(~./60000, name="2020 Percent Vacancies (Red)", labels = scales::percent))+
  #scale_y_continuous(labels = scales::percent) +
  labs(
    title = "Income and Vacancies of Baltimore Neighborhoods 2020",
    x = "Community",
    caption = "source: BNIA Data - By: Parker Leipzig and Rob Wells"
  )

Render this document as an html page

  • Click Render button.
  • Load the page “Hosting_GitHub_Page.html” to your github account.
  • Access the URL from your Github account.

Host html on GitHub

First: Set up Github to host the files.

  1. After uploading this html file to your repo, click on Settings on the top right.

  2. Scroll down to the GitHub Pages section of Settings.

  3. Change the Source from None to master branch and click save.

      For future projects, you can organize your files so that all output HTML are stored 
      in a docs folder. Then the option master branch docs will host those files and ignore 
      everything in the root folder.

To see your file hosted:

1) Take the URL from the html page:

http://github.com/username/reponame/file_name.html

2) Create a new URL.

Start with this prefix:

https://YOURUSERNAME.github.io/

And paste the repo directory and html file name to the end of that string

https://YOURUSERNAME.github.io/YOUR-REPO-FOLDER-NAME/YOUR-FILE-NAME.html

and you should have your hosted file!

Get rid of extraneous words such as “blob” and just use your file name, ie: Hosting_GitHub_Page.html

https://wellsdata.github.io/data_journalism_class/04_labs/lab_13/Hosting_GitHub_Page.html

In other words:

REVEL IN YOUR NERD POWERS

Part 2 - Thursday.

Embedding Images

  • create a folder in your repo, call it images

  • find any .jpg or .png file and insert it into that folder.

  • In a QMD file, display the image as follows:

A more advanced technique controlling the width and height

Read the Screen
Read the Screen

Embedding code

From a Datawrapper Map

Embedding video

Video walkthrough

Embed a GIF